<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>文章来源阅读次数统计</title>
    <#include "/header.html">
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chart.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/stats.css">
    <link rel="stylesheet" href="${request.contextPath}/statics/css/chartStyle.css">
    <script src="${request.contextPath}/statics/plugins/layui/layui.all.js"></script>
    <script src="${request.contextPath}/statics/js/echarts.min.js"></script>
    <style>

        .glyphicon-arrow-up{
            color: red;
        }

        .glyphicon-arrow-down{
            color: #76d471;
        }
        #refreshs{
            position:fixed;
            top: 200px;

            width: 240px;
            border: 1px solid #cccccc;
            border-right: none;
            border-radius:5px 0 0 5px;
            background: #ffffff;
            padding: 10px 5px;
            z-index: 999;
        }
        .arrows{
            position: absolute;
            left: -41px;
            top: 15px;
            width: 40px;
            height: 40px;
            line-height:40px;
            text-align: center;
            border: 1px solid #ffffff;
            background: #62a6f5;
            cursor: pointer;
        }
        .refreshss{
            cursor: pointer;
            background: #62a6f5;
            position: absolute;
            left: -41px;
            top: 55px;
            width: 40px;
            height: 40px;
            line-height:40px;
            text-align: center;
            border: 1px solid #ffffff;
        }
        .refreshsss{
            top: 95px;
        }
        .bootstrap-select{
            width: 100% !important;
        }
    </style>
</head>

<body>
<script src="${request.contextPath}/statics/js/common.js"></script>
<script src="${request.contextPath}/statics/js/transData.js"></script>

<div id="refreshs" style="right:0px;">
    <div class="arrows"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-arrow-right"></span></div>
    <div class="refreshss" onclick="netrafficPage.refresh('refresh')"><span style="color:#ffffff;font-size: 16px;" class="glyphicon glyphicon-refresh"></span></div>
    <div class="refreshss refreshsss" onclick="netrafficPage.refresh('play')">
        <span style="color:#ffffff;font-size: 16px;" class="fa fa-play"></span>
    </div>
    <div class="row">
        <div class="col-md-10 col-md-offset-1">
            <select id="fromSelect"  class="selectpicker" style="width: 100%;"  multiple  title="选择来源" onchange="selectChange()">
                <option value="singlemessage">私聊</option>
                <option value="groupmessage">群聊</option>
                <option value="timeline">朋友圈</option>
            </select>
        </div>
    </div>
    <div class="row" style="margin-top: 5px">
        <div class="col-md-10 col-md-offset-1">
            <select id="fromSelect2"  class="selectpicker" style="width: 100%;"  multiple  title="选择事件类型" onchange="selectChange()">
                <option value="0">阅读文章</option>
                <option value="2">点击相关阅读</option>
                <option value="5">点击展开全文</option>
                <option value="6">阅读文档滚动到底部</option>
            </select>
        </div>
    </div>
    <div class="row" style="margin-top: 10px;">
            <div class="col-md-10 col-md-offset-1" >
                <input type="text" class="layui-input" placeholder="请选择时间" autocomplete="off" id="date">
            </div>
        </div>

        <!--<div class="row" style="margin-top: 10px;">-->
            <!--<div class="col-md-10 col-md-offset-1" style="text-align: center;">-->
                <!--<div class="btn-group-vertical" role="group" style="width: 100%;" id="dateselect">-->
                    <!--<div type="button" class="btn btn-default">1分钟</div>-->
                    <!--<div type="button" class="btn btn-default">半小时</div>-->
                    <!--<div type="button" class="btn btn-default btn-primary">1小时</div>-->
                <!--</div>-->
            <!--</div>-->
        <!--</div>-->

</div>
<div class="panel panel-default container-fluid">
    <div class="row chartsBox">
        <div class="col-md-12 chartCon">
            <div id="allPlatfrom" class="chartStyle"></div>
            <div class="chartText">
                <i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">
                    昨
                </i>
                <span class="valColor yCurrentTotal yesterdayStyle2">暂无</span>
                <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">
                    今
                </i>
                <span class="valColor tCurrentTotal todayStyle2">暂无</span>
                <i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">
                    总
                </i>
                <span class="valColor yTotal totalStyle2">暂无</span>
                <#if shiro.hasPermission("netrafftic:allPlatformCharts:exportExcel")>
                <span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>
            </#if>
        </div>
    </div>
</div>
<div id="chartAll"></div>
</div>
</body>
<script type="text/javascript">
    function selectChange(){
        netrafficPage.refresh('refresh');
    }
    $(function () {
        netrafficPage.fixedBox();
        netrafficPage.init();
    });
    var ipLoading = false;
    var indexloading = null;
    var _date = "";
    var dateselect ='hour';
    var getdata = null;
    var indexTimer = false;
    var ipDetail;
    var netrafficPage = {
        init:function () {
            var _this = this;
            _this.showChart();
            _this.showToptip();
            $('#fromSelect').val(['singlemessage','groupmessage','timeline']);
            $('#fromSelect').selectpicker('refresh');
            $('#fromSelect2').val(['0']);
            $('#fromSelect2').selectpicker('refresh');
            _date = $("#date").val();
            _this.refresh('refresh');
        },
        refresh:function (type) {
            var _this = this;
            _this.getIp();
            window.clearInterval(getdata);

            if(type == 'refresh'){
                $(".refreshsss span").removeClass("fa-play").addClass("fa-pause");
                indexTimer = true;
                getdata = window.setInterval(function(){
                    if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='modules/view/articleReadCount.html'){
                        return;
                    }
                    _this.getIp();
                },1000*60)
            }
            if(type == 'play'){
                if(!indexTimer){
                    $(".refreshsss span").removeClass("fa-play").addClass("fa-pause");
                    indexTimer = true;
                    getdata = window.setInterval(function(){
                        if($(window.parent.document).find(".page-tabs-content .active").attr('data-id')!='modules/view/articleReadCount.html'){
                            return;
                        }
                        _this.getIp();
                    },1000*60)
                }else{
                    $(".refreshsss span").addClass("fa-play").removeClass("fa-pause");
                    indexTimer = false;
                }
            }
        },
        getIp:function () {
            // var index = layer.msg('加载中', {
            //       icon: 16
            //       ,shade: 0.01
            //   });
            var _this = this;
            var _fromArr = $("#fromSelect").val() || [];
            var _fromArr2 = $("#fromSelect2").val() || [];
            var data = {
                dateTime:_date,
                timeType:dateselect,
                params:_fromArr,
                params2:_fromArr2
            };
           // console.log(data);
            indexloading = layer.load(2);
            ajaxc({
                type: "POST",
                permit:"nettraffic:all:allCharts",
                url: baseURL+"articleStatis/findArticleRecordReadNumStatics",
                data: JSON.stringify(data),
                contentType:'application/json;charset=utf-8',
                success: function(result){
                    layer.close(indexloading);
                    if(result.code == 0){//登录成功
                        //console.log(result.result)
                        ipDetail = result.data;
                        _this.allPlatfromIp();
                        _this.appendChartRoot();
                        //layer.close(index)
                    }else{
                        layer.msg(result.msg);
                    }
                }
            });

        },
        fixedBox:function () {
            var _this = this;
            $('.arrows').click(function(){
                if($('#refreshs').css('right')=='0px'){
                    $('.arrows span').removeClass('glyphicon-arrow-right').addClass('glyphicon-arrow-left');
                    $('#refreshs').animate({
                        right:'-240px'
                    })
                }else{
                    $('.arrows span').removeClass('glyphicon-arrow-left').addClass('glyphicon-arrow-right');
                    $('#refreshs').animate({
                        right:'0px'
                    })
                }

            });
            $('#dateselect .btn').each(function(index){
                $(this).click(function(){
                    $('#dateselect .btn').removeClass('btn-primary');
                    $(this).addClass('btn-primary')
                    if(index==0){
                        dateselect = 'minute';
                    }else if(index==1){
                        dateselect = 'semih';
                    }else if(index==2){
                        dateselect = 'hour';
                    }
                    _this.refresh('refresh');
                })
            });
            layui.use(['form','laydate'], function(){
                var form = layui.form;
                var laydate = layui.laydate;
                laydate.render({
                    elem: '#date',
                    value:new Date(),
                    position:'fixed',
                    done: function(value, date, endDate){
                        _date =value;
                        _this.refresh('refresh');
                    }
                });
            });
        },
        showToptip:function () {
            $('[data-toggle="tooltip"]').tooltip();
        },
        setHours:function () {
            var hours = [];
            for (let i=0;i<24;i++){
                if(i<10){
                    hours.push(0 + '' + i + ':00');
                }else{
                    hours.push(i + ':00');
                }

            };
            //console.log(hours);
            return hours;
        },
        showChart:function () {
            var _this = this;
            _this.chartOpt("allPlatfrom","所有平台");
        },
        chartOpt:function (id,title) {
            var _this = this;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));
            // console.log(myChart)
            // 指定图表的配置项和数据
            var option = {
                title: {
                    text: title + '阅读总量'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                color:['#2ec770','#1c97f5'],
                legend: {
                    data:['昨日','今日'],
                    left: '50%'
                },
                grid: {
                    left: '40px',
                    right: '4%',
                    top:'80px',
                    bottom:'3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {

                    type: 'category',
                    boundaryGap: false,
                    name:'时间',
                    nameLocation:'start',
                    axisLabel: {
                        showMaxLabel: true
                    },
                    data:_this.setHours()
                },
                yAxis: {
                    type: 'value',
                    name:'数量'
                },
                series: [
                    {
                        name:'昨日',
                        type:'line',
                        lineStyle:{
                            color:'#2ec770'
                        },
                        smooth: true,
                        data:[]
                    },
                    {
                        name:'今日',
                        type:'line',
                        areaStyle: {},
                        lineStyle:{
                            color:'#1c97f5'
                        },
                        smooth: true,
                        data:[]
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option,true);

        },
        commonOption:function (id,title,seriesData) {
            var _this = this;
            var timeType = dateselect;
            // 基于准备好的dom，初始化echarts实例
            var myChart = echarts.init(document.getElementById(id));
            var dataZoomOpt;
            var setOpt  = {};
            var axLabel = {
                formatter:'{value}'
            };
            if(timeType != "minute"){
                axLabel = {
                    formatter:function (params) {
                        // console.log(params.value);
                        var val  = params.value;
                        // console.log(params.value.indexOf('30'))
                        return params.value.indexOf('30')>-1? params.value + " ~ " + params.value.split(":")[0] + ":59" :timeType == 'semih'? params.value + " ~ " + params.value.split(":")[0] + ":30":params.value + " ~ " + params.value.split(":")[0] + ":59" ;
                    }
                };

            }
            if(timeType == "minute" ){
                setOpt = {
                    interval:59
                };
            }
            // console.log(myChart)
            // 指定图表的配置项和数据
            if(dateselect != "minute"){
                dataZoomOpt = [];
            }else{
                dataZoomOpt = [{
                    startValue: '00:00'
                }, {
                    type: 'inside'
                }];

            }
            var option = {
                title: {
                    text: title + '阅读总量'
                },
                tooltip: {
                    trigger: 'axis',
                    formatter:function (params) {
                        //console.log(params,'22222');
                        var data;
                        var html = '<span style="color: #FFFFFF">'+params[0].axisValueLabel+'</span><br />';
                        var perHtml = '';
                        if(params.length > 1){
                            data = calPercent(params[1].value,params[0].value);
                            if(data.perType == 1){
                                perHtml = '<i class="fa fa-long-arrow-up" style="color: red;margin-right: 3px"></i><span style="color: red;">'+data.percent+'</span>';
                            }else if(data.perType == 2){
                                perHtml = '<i class="fa fa-long-arrow-down" style="color: #2ec770;margin-right: 3px"></i><span style="color: #2ec770;">'+data.percent+'</span>';
                            }

                        }
                        params.map(function (item) {
                            if(item.seriesName == '今日'){
                                html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName + ':' + addSplit(item.value) + '&nbsp;&nbsp;&nbsp;'+ perHtml;
                            }else{
                                html = html + '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' + item.color + '"></span>' + item.seriesName + ':' + addSplit(item.value) + '<br/>';
                            }
                        });
                        return html;
                    },
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985',
                            formatter:function (params) {
                                return parseFloat(params.value).toFixed(0)
                            }
                        }
                    }
                },
                color:['#2ec770','#1c97f5'],
                legend: {
                    data:['昨日','今日'],
                    left: '50%'
                },
                grid: {
                    left: '40px',
                    right: '4%',
                    top:'90px',
                    bottom:'3%',
                    containLabel: true
                },
                toolbox: {
                    feature: {
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    name:'时间',
                    nameLocation:'start',
                    axisLabel: {
                        showMaxLabel: true
                    },
                    axisPointer:{
                        label:axLabel
                    },
                    axisLabel:setOpt,
                    data:ipDetail.xaxis
                },
                yAxis: {
                    type: 'value',
                    name:'数量'
                },
                dataZoom:dataZoomOpt,
                series: [
                    {
                        name:'昨日',
                        type:'line',
                        lineStyle:{
                            color:'#2ec770'
                        },
                        smooth: true,
                        data:seriesData.yesterdayCount
                    },
                    {
                        name:'今日',
                        type:'line',
                        areaStyle: {},
                        lineStyle:{
                            color:'#1c97f5'
                        },
                        smooth: true,
                        data:seriesData.todayCount
                    }
                ]
            };

            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option,true);

        },
        allPlatfromIp:function () {
            var _this = this;
            _this.commonOption("allPlatfrom","所有平台",ipDetail.totalIp);
            $("#allPlatfrom").siblings(".chartText").find(".tCurrentTotal").text(transData(ipDetail.totalIp.todayNowCount));
            $("#allPlatfrom").siblings(".chartText").find(".yCurrentTotal").text(transData(ipDetail.totalIp.yesterDayNowCount));
            $("#allPlatfrom").siblings(".chartText").find(".yTotal").text(transData(ipDetail.totalIp.yesterDayTotalCount));
        },
        appendChartRoot:function () {
            var _this = this;
            var _html = '';
            var allData =  _this.split_array(ipDetail.platformIp,3);
            for(var i = 0;i<allData.length;i++){
                var col = '';
                for(var j = 0;j<allData[i].length;j++){
                    col = col+ '<div class="col-md-4 chartCon"><div id="'+allData[i][j].platformId+'" class="chartStyle"></div><div class="chartText">';
                    col = col + '<i class="tipLogo yesterdayStyle1" data-toggle="tooltip" data-placement="top" title="昨日此时总计">';
                    col = col + '昨</i><span class="valColor yCurrentTotal yesterdayStyle2">'+transData(allData[i][j].yesterDayNowCount)+'</span>';
                    col = col + ' <i class="tipLogo todayStyle1" data-toggle="tooltip" data-placement="top" title="今日此时总计">今</i>';
                    col = col + '<span class="valColor tCurrentTotal todayStyle2">'+transData(allData[i][j].todayNowCount)+'</span>';
                    col = col + '<i class="tipLogo totalStyle1" data-toggle="tooltip" data-placement="top" title="昨日总计">总 </i>';
                    col = col + ' <span class="valColor yTotal totalStyle2">'+transData(allData[i][j].yesterDayTotalCount)+'</span>';
                    col = isAuth("nettraffic:all:allCharts")?col + '<span class="exportExcelBtn"><i class="fa fa-download" style="padding-right: 5px;"></i>导出</span>':col + '';
                    col = col + '</div></div>';
                }
                _html  = _html+ '<div class="row chartsBox">'+ col + '</div>';
            };
            $("#chartAll").html(_html);
            for(var i = 0;i<allData.length;i++){
                for(var j = 0;j<allData[i].length;j++){
                    _this.commonOption(allData[i][j].platformId,allData[i][j].nickName,allData[i][j])
                }
            };
            _this.showToptip();
        },
        split_array: function (arr, len){
            var a_len = arr.length;
            var result = [];
            for(var i=0;i<a_len;i+=len){
                result.push(arr.slice(i,i+len));
            }
            return result;
        }
    }
</script>
</html>